<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>注册</title>
    <link rel="stylesheet" href="../../fonts/font_awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <!--<link rel="stylesheet" href="../../css/login/login.css">-->
    <style>
        body,
        .mui-scroll-wrapper, .mui-scroll,
        .mui-scroll-wrapper{
            background: #fff!important;
        }
        .mui-navbar{
            background: #fff;
        }
        .logo-m{
            width:68px;
            height:68px;
            border: 1px solid #EDEDED;
            margin:0 auto;
            border-radius: 50%;
        }
        .logo{
            width:50px;
            height:50px;
            line-height:50px;
            margin:9px auto;
            background: #4FA4E7;
            color: #fff;
            border-radius: 50%;
            overflow: hidden;
        }
        .mui-cards{
            /*border:1px solid #A1A1A1;*/
            border-radius:5px;
        }
        .mui-cards--margin{
            margin:0 25px;
        }
        #code_m{
            position: relative;
        }
        #sends{
            width:80%;
        }
        .mui-button-dfs{
            margin:20px 30px 0;
        }
        .mui-button-dfs .mui-btn-block{
            padding:10px 12px!important;
            font-size:14px!important;
        }
        .mui-button-dfs .mui-btn-block .mui-spinner{
            width: 14px;
            height: 14px;
        }
    </style>
</head>
<body class="mui-fullscreen" style="background: #fff!important;">
<!--页面主结构开始-->
<div id="app" class="mui-views">
    <div class="mui-view">
        <div class="mui-navbar">
        </div>
        <div class="mui-pages">
        </div>
    </div>
</div>
<!--单页面开始-->
<div id="setting" class="mui-page">
    <!--页面标题栏开始-->
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"><!--注册--></h1>
    </div>
    <!--页面标题栏结束-->
    <!--页面主内容区开始-->
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="mui-content" style="background: #fff;">
                    <div class="mui-content-padded">
                        <br>
                        <br>
                        <div class="mui-text-center">
                            <div class="logo-m">
                                <div class="logo">
                                    logo
                                </div>
                            </div>
                        </div>
                        <div style="height: 100px;"></div>
                        <!--<br>-->
                        <!--<br>-->
                        <div class="mui-cards mui-cards--margin">
                            <div class="mui-input-row">
                                <input id="phone" placeholder="手机号" type="text" maxlength="11" >
                            </div>
                            <div id="code_m" class="mui-input-row ">
                                <div class="mui-row">
                                    <div class="mui-col-xs-8">
                                        <input id="code" placeholder="请输入验证码" type="text" maxlength="11" >
                                    </div>
                                    <div class="mui-col-xs-4">
                                        <button id="sends" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">发送</button>
                                    </div>
                                </div>

                            </div>
                            <div class="mui-input-row mui-password">
                                <input id="pass" placeholder="密码" type="password" class="mui-input-password">
                            </div>
                            <div class="mui-input-row">
                                <input id="account" placeholder="请输入邀请人账号" type="text" maxlength="11" >
                            </div>
                        </div>
                        <div class="xy mui-cards--margin">
            <span style="margin-left:10px;">
                <span class="fa fa-check-circle" style="margin-right:5px;color: rgb(45, 140, 240)"></span>我已经阅读并同意
            </span>
                            <a href="#agreement" style="margin-top:0px;display: inline-block">
                                &lt;&lt;X联盟注册协议&gt;&gt;
                            </a>
                        </div>
                        <div class="mui-button-dfs">
                            <button id="submit" type="button" class="mui-btn mui-btn-primary mui-btn-block">立即注册</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--页面主内容区结束-->
</div>
<!--银行信息-->
<div id="agreement" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"><!--协议--></h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll" id="busstable">
                <div class="mui-content" style="background: #fff;">
                    <h3>x联盟服务商的服务和义务</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div class="mui-content" style="background: #fff;">-->
    <!---->
<!--</div>-->
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/mui-view/mui.view.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script>
    // 60s倒计时
    var wait=60;
    var flag =true;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.innerHTML="发送验证码";
            wait = 60;
            flag=true;
        } else {
            flag = false;
            o.setAttribute("disabled", true);
            o.innerHTML= wait + " s";
            wait--;
            setTimeout(function () {
                    time(o)
                },
                1000)
        }
    }

    mui.ready(function () {

        // 倒计时
        mui(".mui-row").on('tap', "#sends", function () {
            if(flag){
                time(this);
                console.log("11")
            }else{

                console.log("22")
            }
        })
    })


    //初始化单页view
    var viewApi = mui('#app').view({
        defaultPage: '#setting'
    });
    //初始化单页的区域滚动
    mui('.mui-scroll-wrapper').scroll();

    var view = viewApi.view;
    (function($) {
        //处理view的后退与webview后退
        var oldBack = $.back;
        $.back = function() {
            if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
                viewApi.back();
            } else { //执行webview后退
                oldBack();
            }
        };
        //监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
        //第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
        view.addEventListener('pageBeforeShow', function(e) {
            //				console.log(e.detail.page.id + ' beforeShow');
        });
        view.addEventListener('pageShow', function(e) {
            //				console.log(e.detail.page.id + ' show');
        });
        view.addEventListener('pageBeforeBack', function(e) {
            //				console.log(e.detail.page.id + ' beforeBack');
        });
        view.addEventListener('pageBack', function(e) {
            //				console.log(e.detail.page.id + ' back');
        });
    })(mui);
</script>
</body>
</html>